import { View, Button, Text, Image, ScrollView, Radio } from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, { Component } from 'react';
import * as T from '../types';
import './checkTab.less';
import actions from '../actions/index';
import { connect } from 'react-redux';
import { store2Props } from '../selectors';
import chijingRight from '@/assets/image/index/memberOpen/chijingRight.png';
import chijingLeft from '@/assets/image/index/memberOpen/chijingLeft.png';
import lanjingRight from '@/assets/image/index/memberOpen/lanjingRight.png';
import lanjingLeft from '@/assets/image/index/memberOpen/lanjingLeft.png';
import lanjingLogo from '@/assets/image/index/memberOpen/lanjing-logo.png';
import chijingLogo from '@/assets/image/index/memberOpen/chijing-logo.png';
interface ComponentState {
  newUserModel: boolean;
  checkTab: 0 | 1;
  checkList: string;
}

type ITopProps = T.IProps & T.ITopProps;
//@ts-ignore
@connect<Partial<ITopProps>, T.ITopState & ComponentState>(store2Props, actions)
export default class Info extends Component<Partial<ITopProps>, T.ITopState & ComponentState> {
  constructor(props: ITopProps) {
    super(props);
    this.state = {
      newUserModel: true,
      checkTab: 0,
      checkList: 'lanjingList',
    };
  }
  setCheckTab(e: 0 | 1, checkList: string) {
    if (this.state.checkTab !== e) {
      this.setState({
        checkTab: e,
        checkList,
      });
      const lanjingFirst = this.props.main.lanjingList[0];
      const chijingFirst = this.props.main.chijingList[0];
      this.props.actions.action.commonChange(
        `main.selectCard`,
        checkList == 'lanjingList' ? lanjingFirst.cardId : chijingFirst.cardId,
      );
      this.props.actions.action.page2(checkList == 'lanjingList' ? 0 : 1)
    }
  }
  lanjingLeft() {
    return (
      <View
        onClick={() => this.setCheckTab(0, 'lanjingList')}
        className={`checkTab-left checkTabStrip-lanjing  ${this.state.checkTab == 0 ? 'checkTab-check' : ''}`}
      >
        <View className="checkTabStrip-lanjing-text">
          <Image src={lanjingLogo} className="memberLogo" />
          蓝晶会员
        </View>
        <Image src={lanjingLeft} className="gropundImage" />
      </View>
    );
  }
  lanjingRight() {
    return (
      <View
        onClick={() => this.setCheckTab(1, 'lanjingList')}
        className={`checkTab-right checkTabStrip-lanjing ${this.state.checkTab == 1 ? 'checkTab-check' : ''} `}
      >
        <View className="checkTabStrip-lanjing-text">
          <Image src={lanjingLogo} className="memberLogo" />
          蓝晶会员
        </View>
        <Image src={lanjingRight} className="gropundImage" />
      </View>
    );
  }
  chijingLeft() {
    return (
      <View
        onClick={() => this.setCheckTab(0, 'chijingList')}
        className={`checkTab-left checkTabStrip-chijing  ${this.state.checkTab == 0 ? 'checkTab-check' : ''}`}
      >
        <View className="checkTabStrip-chijing-text">
          <Image src={chijingLogo} className="memberLogo" />
          赤晶会员
        </View>
        <Image src={chijingLeft} className="gropundImage" />
      </View>
    );
  }
  chijingRight() {
    return (
      <View
        onClick={() => this.setCheckTab(1, 'chijingList')}
        className={`checkTab-right checkTabStrip-chijing ${this.state.checkTab == 1 ? 'checkTab-check' : ''} `}
      >
        <View className="checkTabStrip-chijing-text">
          <Image src={chijingLogo} className="memberLogo" />
          赤晶会员
        </View>
        <Image src={chijingRight} className="gropundImage" />
      </View>
    );
  }
  render() {
    let {
      actions: { action },
      main: { lanjingList, chijingList, selectCard },
    } = this.props;
    const cardType = ['月卡', '季卡', '半年卡', '年卡', '连续包月'];

    const list = this.state.checkList == 'lanjingList' ? lanjingList : chijingList;
    return (
      <View className="memberOpen-payCard">
        <View className="checkTab">
          {/* <View
            onClick={() => this.setCheckTab(0)}
            className={`checkTab-left checkTabStrip-lanjing  ${this.state.checkTab == 0 ? 'checkTab-check' : ''}`}
          >
            <View className="checkTabStrip-lanjing-text">
              <Image src={lanjingLogo} className="memberLogo" />
              蓝晶会员
            </View>
            <Image src={tabcheckLeft} className="gropundImage" />
          </View>
          <View
            onClick={() => this.setCheckTab(1)}
            className={`checkTab-right checkTabStrip-chijing ${this.state.checkTab == 1 ? 'checkTab-check' : ''} `}
          >
            <View className="checkTabStrip-chijing-text">
              <Image src={chijingLogo} className="memberLogo" />
              赤晶会员
            </View>
            <Image src={tabcheckRight} className="gropundImage" />
          </View> */}
          {this.lanjingLeft()}
          {this.chijingRight()}
        </View>
        <View
          className="checkTabContent"
          style={{ borderRadius: `${this.state.checkTab == 0 ? 0 : 16}rpx ${this.state.checkTab == 1 ? 0 : 16}rpx 0 0` }}
        >
          <View className="checkTabBody-members">
            {list.map((e) => (
              <View
                className={`checkTabBody-member ${selectCard == e.cardId ? 'checkTabBody-member-select' : ''}`}
                onClick={() => {
                  this.props.actions.action.commonChange('main.selectCard', e.cardId);
                }}
                key={e.cardId}
              >
                <View className="checkTabBody-member-body">
                  <Text className="checkTabBody-member-title">{cardType[e.cardType]}</Text>
                  <Text className="checkTabBody-member-money">
                    <Text
                      style={{
                        fontSize: '28rpx',
                        fontWeight: 400,
                        color: '#FF7400',
                      }}
                    >
                      ￥
                    </Text>
                    {/* {selectCard} , {e.cardId} */}
                    {e.activityPrice}
                  </Text>
                  <Text className="checkTabBody-member-delete">￥{e.price}</Text>
                </View>
              </View>
            ))}
          </View>
        </View>
      </View>
    );
  }
}

//create by moon https://github.com/creasy2010/moon
